/*
 * @Author: ice
 * @Date: 2019-01-22 11:44:10
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-04-15 14:19:52
 */
<template>
    <div>
        <div class="table-wrap">
            <!-- 列表 -->
            <el-table
                :fit="true"
                v-if="resourceList"
                ref="mainTable"
                :data="resourceList"
                tooltip-effect="dark"
                style="width: 100%;"
                @selection-change="fnSelect"
                class="common-table"
            >
                <el-table-column
                    type="selection"
                />
                <el-table-column
                    prop="company_name"
                    label="公司名称"
                    :formatter="emptyFormatter"
                    show-overflow-tooltip
                    :width="180"
                />
                <el-table-column
                    label="资源类别"
                    show-overflow-tooltip
                    :width="100"
                >
                    <template slot-scope="scope">
                        {{ scope.row.type_name }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="resource_title"
                    label="资源名称"
                    :width="200"
                    show-overflow-tooltip
                />

                <el-table-column
                    prop="address"
                    label="已有排期"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.resource_schedule.length != 0">
                            <p
                                v-for="(item, index) in scope.row.resource_schedule"
                                :key="index">
                                {{ item.date_str }}-{{ item.company_name }}
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="取消排期"
                                    placement="right">
                                    <i
                                        v-if="item.current == 1"
                                        @click="fnCancelSchedule(scope.row.resource_no, item.date_range, 'single')"
                                        class="el-icon-delete"/>
                                </el-tooltip>

                            </p>
                        </div>
                        <div v-else>无</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="操作"
                    fixed="right"
                    align="center"
                    :width="80"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="fnOperateSchedule(scope.row, 'single')"
                        >
                            排期
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 列表 -->
        <div class="shop-footer">
            <div class="block left">
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    :disabled="!resourceList || resourceList.length == 0"
                    v-model="checkAll"
                    @change="fnSelectAll"
                >
                    全选
                </el-checkbox>
                <el-button
                    href="javascript:;"
                    class="del-all"
                    type="text"
                    style="margin-left: 20px;"
                    :disabled="selection.length == 0"
                    @click="fnOperateSchedule(selection, 'mass')"
                >
                    批量排期
                </el-button>
                <el-button
                    href="javascript:;"
                    class="del-all"
                    type="text"
                    style="margin-left: 20px;"
                    :disabled="selection.length == 0"
                    @click="fnCancelSchedule(selection, null, 'mass')"
                >
                    批量取消排期
                </el-button>
            </div>
        </div>
        <!-- 排期弹窗 -->
        <el-dialog
            title="设置排期"
            width="530px"
            custom-class="schedule-dialog"
            :visible.sync="dialogScheduleFlag">
            <el-form
                :model="form"
                :rules="rules"
                ref="ruleForm">
                <el-form-item
                    label="资源名称"
                    :label-width="formLabelWidth">
                    <span>{{ resourceText }}</span>
                </el-form-item>
                <el-form-item
                    label="设置时间"
                    prop="date"
                    :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.date"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy 年 MM 月 dd 日"
                        range-separator="至"
                        :picker-options="pickerOptions"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"/>
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button @click="fnResetSchedule('ruleForm')">取 消</el-button>
                <el-button
                    type="primary"
                    @click="fnSubmitSchedule('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "CarItem",
    components: {
    },
    props: {
        list: {
            type: Array,
            default: null
        },
        rate: {
            type: Number,
            required: true
        },
        type: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            isVip: true,
            resourceList: null,
            isIndeterminate: false,
            checkAll: false,
            selection: [],
            stat: {
                totalMoney: 0,
                totalPeople: 0,
                totalPrice: 0,
                totalFee: 0
            },
            form: {
                date: []
            },
            formLabelWidth: '80px',
            dialogScheduleFlag: false,
            rules: {
                date: [
                    { required: true, message: '请选择日期', trigger: 'change' }
                ]
            },
            resourceText: '',
            resource_nos: [],
            pickerOptions: {
                disabledDate(time) {
                    return (time.getTime() + 3600 * 1000 * 24) < Date.now();
                }
            },
        };
    },
    watch: {
        list(val){
            this.resourceList = val;
            this.fnComputeStat();
        }
    },
    filters: {
        priceFilter(val, isVip){
            let money = 0;

            if(isVip){
                for(let i in val){
                    money += val[i].price_vip * val[i].num;
                }
            }else{
                for(let i in val){
                    money += val[i].price * val[i].num;
                }
            }

            return '¥' + money.toFixed(2);
        }
    },
    computed: {
    },
    methods: {
        fnCancelSchedule(resource_nos, date, type) {
            this.$confirm('确认删除当前排期?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if(type == 'single') {
                    this.$post('/wei4/resource_schedule%5Ccancel', {
                        contract_no: this.$route.query.contract_no,
                        resource_no: resource_nos,
                        schedule_date_range: date
                    }, resp => {
                        if (resp.code == 1) {
                            this.$emit('reload');
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.$emit('reload');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true,
                                duration: 5000
                            });
                        }
                    });
                }else{
                    let list = resource_nos;
                    let json = [];

                    for(let i = 0; i < list.length; i++) {
                        json.push(list[i].resource_no);
                    }
                    this.$post('/wei4/resource_schedule%5Cschedule', {
                        contract_no: this.$route.query.contract_no,
                        resource_no_json: JSON.stringify(json),
                        schedule_action: 'cancel'
                    }, resp => {
                        if (resp.code == 1) {
                            this.$emit('reload');
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true,
                                duration: 5000
                            });
                        }
                    });
                }

            }).catch(() => {
            });
        },
        fnSubmitSchedule(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/wei4/resource_schedule%5Cschedule', {
                        contract_no: this.$route.query.contract_no,
                        resource_no_json: JSON.stringify(this.resource_nos),
                        schedule_date_range: this.form.date[0] + ':' + this.form.date[1],
                        schedule_action: 'set'
                    }, resp => {
                        if (resp.code == 1) {
                            this.$emit('reload');
                            this.$message({
                                type: 'success',
                                message: '操作成功',
                                center: true
                            });
                            this.fnResetSchedule('ruleForm');
                        } else {
                            this.$message({
                                type: 'warning',
                                message: resp.msg,
                                center: true,
                                duration: 5000
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        fnResetSchedule(formName) {
            this.dialogScheduleFlag = false;
            this.$refs[formName].resetFields();
        },
        filterSelected(list){
            let tmpList = [];

            for(var i in list){
                if(list[i].select == 1){
                    tmpList.push(list[i]);
                }
            }
            return tmpList;
        },
        fnOperateSchedule(row, type) {
            let temp = '';
            let resource_nos = [];

            if(type == 'single') {
                temp = row.resource_title;
                resource_nos = [].concat(row.resource_no);
            }else {
                for(let i = 0; i < this.selection.length; i++) {
                    if(temp && i < 2){
                        temp += ',';
                    }
                    if(this.selection.length <= 2) {
                        temp += this.selection[i].resource_title;
                    }else if(i < 2) {
                        temp += this.selection[i].resource_title;
                    }
                    resource_nos.push(this.selection[i].resource_no);
                }
                if(this.selection.length > 2) {
                    temp += ',等' + (this.selection.length) + '个资源';
                }
            }
            this.resource_nos = resource_nos;
            this.resourceText = temp;

            this.dialogScheduleFlag = true;
        },
        /** 计算选中项的统计数据(底部显示) */
        fnComputeStat(){
            let stat = {
                totalMoney: 0,
                totalPeople: 0,
                totalPrice: 0,
                totalFee: 0
            };

            for(var i in this.selection){
                let money = 0;

                for(var j in this.selection[i].resource_price_list){
                    if(this.selection[i].resource_price_list[j].select == 1){
                        if(this.isVip){
                            money += this.selection[i].resource_price_list[j].price_vip * this.selection[i].resource_price_list[j].num;
                        }else{
                            money += this.selection[i].resource_price_list[j].price * this.selection[i].resource_price_list[j].num;
                        }
                    }
                }
                stat.totalPrice += money;
                stat.totalPeople += this.selection[i].resource_people;
            }
            stat.totalPrice = stat.totalPrice.toFixed(2);
            stat.totalFee = (stat.totalPrice * this.rate / 100).toFixed(2);
            stat.totalMoney = (parseFloat(stat.totalPrice) + parseFloat(stat.totalFee)).toFixed(2);

            this.stat = stat;
        },
        fnSelect(selection, row) {
            this.selection = selection;
            this.fnComputeStat();
            let selectionLen = selection.length;
            let totalLen = this.resourceList.length;

            if (selectionLen > 0 && selectionLen < totalLen) {
                this.isIndeterminate = true;
                this.checkAll = false;
            } else if (selectionLen > 0 && selectionLen === totalLen) {
                this.isIndeterminate = false;
                this.checkAll = true;
            } else {
                this.isIndeterminate = false;
                this.checkAll = false;
            }
        },
        fnSelectAll(val) {
            this.$refs.mainTable.toggleAllSelection();
        },
        /** 点击行内删除按钮 */
        fnDeleteCart(rno, item, priceList){
            let select = [{
                r_no: rno,
                p_no: item.no
            }];

            this.$confirm('确认删除该项?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                // 删除本地数据中的相关项
                let hasPrice = false;

                item.select = 0;
                for(var j in priceList){
                    if(priceList[j].select == 1){
                        hasPrice = true;
                        break;
                    }
                }

                if(!hasPrice){
                    for(var i in this.resourceList){
                        if(this.resourceList[i].resource_no === rno){
                            this.resourceList.splice(i, 1);
                            break;
                        }
                    }
                    for(var k in this.selection){
                        if(this.selection[k].resource_no === rno){
                            this.selection.splice(k, 1);
                            break;
                        }
                    }
                }


                this.fnPostDeleteCart(select, () => {
                    this.fnComputeStat();
                    if(this.resourceList.length == 0){
                        this.$emit('reload');
                    }
                });
            }).catch(() => {
            });
        },
        /** 删除所有选中项 */
        fnDeleteCartAll(){
            let select = [];

            for(var i in this.selection){
                select.push({r_no: this.selection[i].resource_no});
            }
            this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.fnPostDeleteCart(select, () => {
                    this.$emit('reload');
                });
            }).catch(() => {
            });
        },

        fnPostDeleteCart(select, callback){
            this.$post('/Cart/remove', {
                select_json: JSON.stringify(select)
            },resp => {
                if(resp.code == 1){
                    callback();
                }else{
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    },
    mounted() {
    },
};

</script>
<style lang="less" scoped>
    .normal-btn{
        color: #606266;
    }
    .total-line-money{
        color: #FFA625;
    }
    .table-wrap{
        background: #fff;;
        height: calc(100vh - 175px);
        overflow: auto;
    }
    .price-num-list{
        display: flex;
        flex-direction: column;
        .price-num-unit{
            margin: 2px 0 3px;
            display: flex;
            align-items: center;
            .price-num{
                width: 60px;
            }
        }
    }

    .el-icon-delete{
        color: #CCCCCC;
        cursor: pointer;
        margin-left: 10px;
        &:hover{
            color: #FD4D23;
        }
    }
</style>
<style lang="less">
  .shop-list-wrap {
    .common-table{
        border: 1px solid rgba(244,244,244,1);
        border-bottom: 0;
        th{
            background:rgba(251,251,251,1);
            padding: 10px 0;
        }
        td{
          padding: 2px 0;
        }
    }
    margin: 20px 48px;
    margin-bottom: 60px;
    .el-input-number--small .el-input__inner{
        padding-left: 20px;
        padding-right: 20px;
    }
    .el-input-number--small .el-input-number__decrease,
    .el-input-number--small .el-input-number__increase {
        width: 16px;
        line-height: 16px !important;
    }
    .el-input-number.is-controls-right .el-input__inner {
        padding: 0 20px 0 5px;
        height: 18px;
        font-size: 14px;
    }
    .el-input-number--small{
        line-height: 18px;
    }
    .el-input--small .el-input__inner{
        height: 18px;
        line-height: 18px;
    }
    .college-wrap {
      width: 150px;
    }
    .width-120 {
      width: 120px;
    }
    .checkbox-wrap {
      position: absolute;
      left: 20px;
    }
    .channel-wrap {
      width: 450px;
      position: relative;
    }
  }

  .info-tooltip {
    max-width: 150px;
    line-height: 1.5;
  }

  .unexport {
    cursor: not-allowed;
    &:hover {
      color: #1f2d3d !important;
    }
  }

  .shop-list-header {
    font-size: 0;
    text-align: center;
    line-height: 80px;
    li {
      color: #5e6d82;
      display: inline-block;
      font-size: 14px;
      height: 80px;
      vertical-align: top;
    }
  }

  .shop-list-content {
    font-size: 0;
    text-align: center;
    margin-bottom: 40px;
    .icon-eyes {
      color: #999999;
    }
    .normal {
      border: 1px solid #e0e6ed;
      border-top: none;
    }
    .shop-header {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      text-align: left;
      border: 1px solid #e0e6ed;
    }
    li {
      height: 124px;
      display: inline-block;
      vertical-align: top;
      font-size: 14px;
      display: table-cell;
    }
    .channel-wrap {
      text-align: left;
      font-size: 0;
      padding-left: 20px;
      overflow: hidden;
      .info-item {
        margin-top: 62px;
        transform: translateY(-50%);
        vertical-align: top;
      }
      .wechat-logo {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-left: 10px;
        margin-right: 20px;
        background-size: cover;
        background-position: center center;
      }
      .channel-name {
        margin-bottom: 25px;
        color: #1f2d3d;
        i {
          margin-left: 10px;
        }
        .name {
          max-width: 122px;
        }
      }
      .channel-label {
        span {
          font-size: 12px;
          color: #475669;
          background: #e5e9f2;
          border-radius: 4px;
          padding: 5px 6px;
        }
      }
      .check-left {
        height: 20px;
        line-height: 1;
        vertical-align: top;
        margin-top: 27px;
        transform: translateY(0);
      }
      .wechat-info {
        width: 154px;
        line-height: 1;
      }
      .wechat-desc {
        width: 153px;
        line-height: 1.2;
        padding-left: 20px;
        p {
          color: #99a9bf;
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    .college-wrap {
      line-height: 1;
      p {
        color: #1f2d3d;
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      div {
        margin-top: 62px;
        transform: translateY(-50%);
      }
    }
    .single-center {
      margin-top: 62px;
      transform: translateY(-50%);
    }
    .operate-wrap {
      line-height: 1;
      div {
        margin-top: 62px;
        transform: translateY(-50%);
        text-align: right;
      }
      p {
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          color: #1f2d3d;
          transition: 0.3s;
          &:hover {
            color: #20a0ff;
          }
        }
      }
    }
    .expired {
      background: #eff2f7;
      border: 1px solid #e0e6ed;
      border-top: none;
      .channel-wrap {
        padding-left: 10px;
        .check-left {
          color: #99a9bf;
        }
      }
      .channel-name {
        .name {
          color: #99a9bf;
          max-width: 100% !important;
        }
      }
      .channel-label {
        span {
          color: #99a9bf !important;
          background: #e5e9f2;
        }
      }
      .college-wrap {
        p {
          color: #99a9bf;
        }
      }
      .single-center {
        color: #99a9bf;
      }
    }
  }

  .shop-footer {
    border-top: 1px solid #f4f4f4;
    position: fixed;
    right: 15px;
    left: 225px;
    bottom: 0;
    background: #fff;
    z-index: 99;
    line-height: 120px;
    padding: 0;
    .left {
      height: 40px;
      line-height: 40px;
      margin-left: 14px;
    }
    .right {
      float: right;
      .cover-number {
        margin: 0 40px;
      }
      .info-wrap {
        height: 40px;
        vertical-align: middle;
        line-height: initial;
        .top {
          text-align: right;
        }
        .bottom {
          color: #bfcbd9;
          .mid-in {
            margin-left: 15px;
          }
        }
      }
    }
    .submit-wrap {
      width: 160px;
      margin-left: 40px;
      vertical-align: middle;
      .connecter {
        display: flex;
        align-items: center;
        height: 44px;
        background: rgba(32, 160, 255, 1);
        border-radius: 4px;
        padding: 0 6px;
        .userhead {
          width: 32px;
          height: 32px;
          border-radius: 32px;
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          margin-right: 6px;
        }
        .username {
          flex: 1;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 20px;
        }
        .userlink {
          display: flex;
          align-items: center;
          .hover-btn {
            line-height: 26px;
            width: 26px;
            height: 26px;
            font-size: 16px;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 26px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-right: 5px;
          }
        }
      }
    }
    a {
      color: #1f2d3d;
      transition: 0.3s;
      &:hover {
        color: #20a0ff;
      }
    }
    .del-all {
    //   margin: 0 40px;
    //   color: #1F2D3D;
    //   &:hover{
    //       color: #00bbee;
    //   }
    //   &.is-disabled,
    //   &.is-disabled:hover{
    //       color: #ccc;
    //   }
    }
  }

  .connect-pop {
    background: rgba(54, 67, 82, 1);
    box-shadow: 0px 2px 4px 0px rgba(54, 67, 82, 0.3);
    color: #fff;
    text-align: center;
    .popper__arrow:after {
      border-top-color: rgba(54, 67, 82, 1) !important;
    }
    .qrcode {
      width: 80px;
      height: 80px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      margin: 10px auto;
    }
  }
</style>
<style lang="less">
.table-wrap{
    .el-table td, .el-table th {
        padding: 4px 0 !important;
    }
}
.schedule-dialog{
    .el-date-editor .el-range-separator{
        width: 24px;
    }
}
</style>
